<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./font_2946837_cdn5tar6otl/iconfont.css">
<link rel="stylesheet" href="./font_3159279_6we50246rtt/iconfont.css">
<link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap.css">
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> -->
<script src="../lib/jquery/jquery-3.2.1.js"></script>
<script src="./url.js"></script>
<script src="../lib/artTemplate/template.js"></script>

<body>
    <div class="wrap">
        <div class="top">
            <p>美发管理系统</p>
            <div class="user">
                name<span class="triangle-down"></span>
            </div>
            <div class="tuichu">退出</div>
        </div>
        <div class="content">
            <div class="nav_list">
                <ul class="yijicaidan">
                    <li class="yjcd_li">
                        <span class="iconfont icon-yonghu icon_p"></span>
                        前台收银
                        <span class="glyphicon glyphicon-menu-left bootstrap_p"></span>
                        <ul class="erjicaidan">
                        </ul>
                    </li>
                    <li class="yjcd_li dianwu">
                        <span class="iconfont icon-yonghu3 icon_p"></span>
                        店务管理
                        <span class="glyphicon glyphicon-menu-left bootstrap_p"></span>
                        <ul class="erjicaidan">
                        </ul>
                    </li>
                    <li class="yjcd_li tt">
                        <span class="iconfont icon-liuzhuanchaxun icon_p"></span>
                        卡向管理
                        <span class="glyphicon glyphicon-menu-left bootstrap_p"></span>
                        <ul class="erjicaidan">
                        </ul>
                    </li>
                    <li class="yjcd_li">
                        <span class="iconfont icon-liuzhuanchaxun icon_p"></span>
                        财务报表
                        <span class="glyphicon glyphicon-menu-left bootstrap_p"></span>
                        <ul class="erjicaidan">
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="cont_xq">
                <div class="xp_top"></div>
                <div class="welcome"><i>欢迎进入剪发管理系统!!!</i></div>
                <div class="table_qh youka">
                    <div class="perject">
                        <label for="memeber_id">请输入会员卡号:</label>
                        <input class="inp form-control" id="member_id" type="text">
                        <span>请选择项目</span>
                        <select name="" id="sel1" class="inp form-control">
                            <option value="">请选择</option>
                        </select>
                        <select name="" id="sel2" class="inp form-control">

                        </select>
                        <span>输入员工工号</span>
                        <input class="inp form-control" id="employee_id" type="text">
                    </div>
                    <table class="table table-striped member_xx">
                        <thead>
                            <tr>
                                <td>会员姓名</td>
                                <td>会员等级</td>
                                <td>会员折扣</td>
                                <td>余额</td>
                            </tr>
                        </thead>
                        <tbody id="tob">
                            <script type="text/html" id="art01">
                                {{each data as el index}}
                                <tr>
                                    <td>{{el.member_name}}</td>
                                    <td>{{el.member_level}}</td>
                                    <td id="discount">{{el.discount}}</td>
                                    <td>{{el.remaining_sum}}</td>
                                </tr>
                                {{/each}}
                            </script>
                        </tbody>
                    </table>
                    <table class="table table-striped xmxq">
                        <thead>
                            <tr>
                                <td>员工编号</td>
                                <td>商品编号</td>
                                <td>名称</td>
                                <td>详情</td>
                                <td>价格</td>
                            </tr>
                        </thead>
                        <tbody id="tob2">
                            <script type="text/html" id="art02">
                                {{each data as el index}}
                                <tr>
                                    <td class="staff"></td>
                                    <td>{{el.kind_id}}</td>
                                    <td>{{el.name}}</td>
                                    <td>{{el.detail}}</td>
                                    <td class="prices"></td>
                                </tr>
                                {{/each}}
                            </script>
                        </tbody>
                    </table>
                    <button class="youka_js">结算</button>
                    <div class="shuaxin"><span class="iconfont icon-shuaxin"></span></div>
                </div>
                <div class="table_qh wuka">
                    <div class="perject">
                        <span>请选择项目</span>
                        <select name="" id="wuka_sel1" class="inp form-control">
                            <option value="">请选择项目</option>
                        </select>
                        <select name="" id="wuka_sel2" class="inp form-control">
                            <option value="">请选择商品</option>
                        </select>
                        <span>输入员工工号</span>
                        <input class="inp form-control" id="employee_id_wuka" type="text">
                    </div>
                    <table class="table table-striped wkxm">
                        <thead>
                            <tr>
                                <td>员工编号</td>
                                <td>编号</td>
                                <td>名称</td>
                                <td>详情</td>
                                <td>价格</td>
                            </tr>
                        </thead>
                        <tbody id="tob3">
                            <script type="text/html" id="art03">
                                {{each data as el index}}
                                <tr>
                                    <td class="staff_wuka"></td>
                                    <td>{{el.kind_id}}</td>
                                    <td>{{el.name}}</td>
                                    <td>{{el.detail}}</td>
                                    <td class="prices_wuka">{{el.price}}</td>
                                </tr>
                                {{/each}}
                            </script>
                        </tbody>
                    </table>
                    <button class="wuka_js">结算</button>
                </div>
                <div class="table_qh gkyy">
                    <div class="tianjia">
                        <p class="tj"><span class="glyphicon glyphicon-plus"></span>添加</p>
                    </div>
                    <table class="table table-striped gkxx">
                        <thead>
                            <tr>
                                <td>顾客姓名</td>
                                <td>会员卡号</td>
                                <td>员工</td>
                                <td>预约时间</td>
                            </tr>
                        </thead>
                        <tbody id="tob4">
                            <script type="text/html" id="art04">
                                {{each data as el index}}
                                <tr>
                                    <td>{{el.customer_name}}</td>
                                    <td>{{el.member_id}}</td>
                                    <td>{{el.employee_id}}</td>
                                    <td>{{el.appointment_time}}</td>
                                </tr>
                                {{/each}}
                            </script>
                        </tbody>
                    </table>
                </div>
                <div class="table_qh yggl">
                    <div class="tianjiayg">
                        <p><span class="glyphicon glyphicon-plus"></span>添加员工</p>
                    </div>
                    <table class="table table-striped ygxx">
                        <thead>
                            <tr>
                                <td>员工编号</td>
                                <td>员工姓名</td>
                                <td>员工职位</td>
                                <td>电话</td>
                                <td>邮箱</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody id="tob5">
                            <script type="text/html" id="art05">
                                {{each data as el index}}
                                <tr>
                                    <td>{{el.employee_id}}</td>
                                    <td>{{el.employee_name}}</td>
                                    <td>{{el.employee_zhiwei}}</td>
                                    <td>{{el.phone}}</td>
                                    <td>{{el.email}}</td>
                                    <td index="{{el.employee_id}}"><button class="glyphicon glyphicon-trash del"></button></td>
                                </tr>
                                {{/each}}
                            </script>
                        </tbody>
                    </table>
                </div>
                <div class="table_qh hyk">
                    <div class="hybox">
                        <div>
                            <p>会员等级录入表</p>
                            <form action="">
                                <label for="" style="text-indent: 28px;">编号</label>
                                <input id="" type="text" name="level_id" class="level_id"><br>
                                <label for="">会员等级</label>
                                <input id="" type="text" name="member_level" class="member_level"><br>
                                <label for="">充值金额</label>
                                <input id="" type="text" name="money" class="money"><br>
                                <label for="">消费折扣</label>
                                <input id="" type="text" name="discount" class="discount_level"><br>
                            </form>
                            <button class="hydj_tianjia hydj">添加</button>
                        </div>
                        <div>
                            <p>会员信息录入</p>
                            <form action="">
                                <label for="" style="text-indent: 28px;">编号</label>
                                <input id="" type="text" name="member_id" class="member_id_xx"><br>
                                <label for="">会员姓名</label>
                                <input type="text" name="member_name" class="member_name_xx"><br>
                                <label for="">会员等级</label>
                                <input id="" type="text" name="member_level" class="member_level_xx"><br>
                                <label for="">充值金额</label>
                                <input id="" type="text" name="money" class="money_xx"><br>
                                <label for="">消费折扣</label>
                                <input id="" type="text" name="discount" class="discount_xx"><br>
                                <label for="">余额</label>
                                <input type="text" name="remaining_sum" class="r_sum_xx">
                            </form>
                            <button class="hydj_tianjia hyxx_tianjia">添加</button>
                        </div>
                        <div class="hycz">
                            <p>会员卡充值</p>
                            <form action="">
                                <label for="" style="text-indent: 28px;">编号</label>
                                <input id="" type="text" name="member_id" class="member_id_cz"><br>
                                <label for="">会员姓名</label>
                                <input type="text" name="member_name" class="member_name_cz"><br>
                                <label for="">会员等级</label>
                                <input id="" type="text" name="member_level" class="member_level_cz"><br>
                                <label for="">充值金额</label>
                                <input id="" type="text" name="money" class="money_cz"><br>
                                <label for="">消费折扣</label>
                                <input id="" type="text" name="discount" class="discount_cz"><br>
                                <label for="">余额</label>
                                <input type="text" name="remaining_sum" class="remaining_sum_cz">
                            </form>
                            <button class="hydj_tianjia hycz_tianjia">添加</button>
                        </div>

                    </div>
                </div>
                <div class="table_qh kgs">
                    <div class="hyxx">
                        <p>会员信息显示</p>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <td>编号</td>
                                    <td>会员姓名</td>
                                    <td>会员等级</td>
                                    <td>充值金额</td>
                                    <td>消费折扣</td>
                                    <td>余额</td>
                                    <td>操作(挂失)</td>
                                </tr>
                            </thead>
                            <tbody id="tob6">
                                <script type="text/html" id="art06">
                                    {{each data as el index}}
                                    <tr index="{{el.member_id}}">
                                        <td>{{el.member_id}}</td>
                                        <td>{{el.member_name}}</td>
                                        <td>{{el.member_level}}</td>
                                        <td>{{el.money}}</td>
                                        <td>{{el.discount}}</td>
                                        <td>{{el.remaining_sum}}</td>
                                        <td><button class="sta" style="border:none;background-color:#71B604;width: 50px;color: white;height: 30px;">{{el.member_status}}</button></td>
                                    </tr>
                                    {{/each}}
                               </script>
                            </tbody>
                        </table>
                        <button class="hydj_tianjia">添加</button>
                    </div>
                </div>
                <div class="table_qh y_day">
                    员工每日业绩

                </div>
                <div class="table_qh y_gz">
                    员工工资计算

                </div>
                <div class="table_qh d_day">
                    店内日营业额统计
                </div>
                <div class="table_qh d_month">
                    店内月营业额统计
                </div>
            </div>
        </div>
        <div class="footer">
            <p>copyright &copy;2022 美发管理系统 v1.0</p>
        </div>
    </div>
    <script>
        let lists = [
            ["有卡消费", '无卡消费'],
            ["顾客预约", "员工管理"],
            ["会员卡充值", "卡挂失"],
            ["员工每日业绩", "员工工资计算", "店内日营业额统计", "店内月营业额统计"],
        ];
        $.each($(".erjicaidan"), function (index) {
            tree_list($(".erjicaidan")[index], lists[index])
        })
        function tree_list(parentNode, tree_data) {
            tree_data.forEach(function (el, index) {
                let oli = document.createElement("li");
                oli.innerHTML = '<span class="glyphicon glyphicon-menu-right"></span>' + el;
                parentNode.appendChild(oli);
            })
        }
        $('.yjcd_li').click(function () {
            $(this.lastElementChild).animate(
                {
                    height: $(this.lastElementChild).children("li").length * $(this.lastElementChild).children("li:eq(0)").height()
                }, 500
            )
        })
        $('.yjcd_li').dblclick(function () {
            $(this.lastElementChild).animate(
                {
                    height: 0
                }, 200
            )
        })
        // table切换
        var itemArr = document.querySelectorAll('.erjicaidan>li');
        var divArr = document.querySelectorAll('.cont_xq>div');
        itemArr.forEach(function (el, index) {
            el.onclick = function () {
                divArr.forEach(function (el) {
                    el.style.display = 'none';
                });
                divArr[index + 2].style.display = 'block';
            }
        })
        // 有卡消费
        let remaining_sum;
        function fun() {
            $.ajax({
                method: "get",
                url: `${Baseurl}/member_s?member_id=${$("#member_id").val()}`,
                success: function (data) {
                    let dataObj = {
                        data: data
                    }
                    remaining_sum = data[0].remaining_sum
                    var str = template("art01", dataObj)
                    $("#tob").html("")
                    $("#tob").html(str)
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
        $("#member_id").change((e) => {
            fun()
        })

        // 三级联动
        $.ajax({
            method: "get",
            url: `${Baseurl}/hair_kind_search`,
            success: function (data) {
                console.log(data);
                let name_arr = []
                data.forEach(function (el, index) {
                    name_arr.push(el.name)
                })
                console.log(name_arr);
                let name_newarr = new Set(name_arr)
                name_newarr.forEach(function (el, index) {
                    let optionNode = document.createElement("option")
                    $(optionNode).text(el)
                    $("#sel1").append(optionNode)
                })
            }
        })
        let dis;
        let detail;
        let yingshou;
        let dis_wuka;
        let detail_wuka;
        let yingshou_wuka;
        $("#sel1").change((e) => {
            $.ajax({
                method: "get",
                url: `${Baseurl}/hair_kind_search?name=${$("#sel1").val()}`,
                success: function (data) {
                    $("#sel2").text("")
                    data.forEach((el, index) => {
                        let optionNode = document.createElement("option")
                        $(optionNode).text(el.detail)
                        $("#sel2").append(optionNode)
                    })

                }
            })

            $("#sel2").change((e) => {
                $.ajax({
                    method: "get",
                    url: `${Baseurl}/hair_kind_search?detail=${$("#sel2").val()}`,
                    success: function (data) {
                        let dataObj = {
                            data: data
                        }
                        let str = template("art02", dataObj)
                        $("#tob2").html("")
                        $("#tob2").html(str)
                        let price = data[0].price * $("#discount").text()
                        dis = $("#discount").text()
                        detail = data[0].detail
                        yingshou = data[0].price
                        $(".prices").text(price)
                        $("#employee_id").change((e) => {
                            $(".staff").text($("#employee_id").val())
                        })
                    }
                })
            })
        })
        $(".youka_js").click(function (e) {
            e.preventDefault()
            const promise = new Promise((resolve, reject) => {
                $.ajax({
                    method: "post",
                    url: `${Baseurl}/expense`,
                    data: {
                        expense_id: Math.round(Math.random() * 80 + 1),
                        member_id: $("#member_id").val(),
                        detail: detail,
                        employee_id: $("#employee_id").val(),
                        discount: dis,
                        yingshou: yingshou,
                        shishou: yingshou * dis
                    },
                    success: function (data) {
                        resolve(data)
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            })
            promise.then((data) => {
                console.log(data);
                if (data == "保存成功") {
                    console.log(remaining_sum - yingshou * dis);
                    $.ajax({
                        method: "post",
                        url: `${Baseurl}/member_sum`,
                        data: {
                            member_id: $("#member_id").val(),
                            remaining_sum: remaining_sum - yingshou * dis
                        },
                        success: function (data) {
                            console.log(data);
                            alert(data)
                            fun()
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    })
                }
            }).catch((err) => {
                console.log(err);
            })
        })


        // 无卡消费


        $.ajax({
            method: "get",
            url: `${Baseurl}/hair_kind_search`,
            success: function (data) {
                console.log(data);
                let name_arr = []
                data.forEach(function (el, index) {
                    name_arr.push(el.name)
                })
                console.log(name_arr);
                let name_newarr = new Set(name_arr)
                name_newarr.forEach(function (el, index) {
                    let optionNode = document.createElement("option")
                    $(optionNode).text(el)
                    $("#wuka_sel1").append(optionNode)
                })
            }
        })

        $("#wuka_sel1").change((e) => {
            $.ajax({
                method: "get",
                url: `${Baseurl}/hair_kind_search?name=${$("#wuka_sel1").val()}`,
                success: function (data) {
                    $("#wuka_sel2").text("")
                    data.forEach((el, index) => {
                        let optionNode = document.createElement("option")
                        $(optionNode).text(el.detail)
                        $("#wuka_sel2").append(optionNode)
                    })

                }
            })

            $("#wuka_sel2").change((e) => {

                $.ajax({
                    method: "get",
                    url: `${Baseurl}/hair_kind_search?detail=${$("#wuka_sel2").val()}`,
                    success: function (data) {
                        let dataObj = {
                            data: data
                        }
                        let str = template("art03", dataObj)
                        $("#tob3").html("")
                        $("#tob3").html(str)
                        detail = data[0].detail
                        yingshou = data[0].price
                        $("#employee_id_wuka").change((e) => {
                            $(".staff_wuka").text($("#employee_id_wuka").val())
                        })
                    }
                })
            })
        })
        $(".wuka_js").click((e) => {
            e.preventDefault()
            alert("扫码付钱")
        })
        $(".dianwu").click((e) => {
            e.preventDefault()
            console.log(111);
            $.ajax({
                method: "get",
                url: `${Baseurl}/Booking`,
                success: function (data) {
                    console.log(data);
                    let dataObj = {
                        data: data
                    }
                    let str = template("art04", dataObj)
                    $("#tob4").html("")
                    $("#tob4").html(str)
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })
        $(".tianjia").click((e) => {
            e.preventDefault()
            window.location = "./cbooking.html"
        })
        $.ajax({
            method: "get",
            url: `${Baseurl}/staff_info`,
            success: function (data) {
                console.log(data);
                let dataObj = {
                    data: data
                }
                let str = template("art05", dataObj)
                $("#tob5").html("")
                $("#tob5").html(str)
                $(".del").each((index, el) => {
                    $(el).click((e) => {
                        let index = $(el).parent().attr("index")
                        $(el).parent().parent().remove()
                        $.ajax({
                            method: "post",
                            url: `${Baseurl}/staff_del`,
                            data: {
                                employee_id: index
                            },
                            success: function (data) {
                                console.log(data);
                            },
                            error: function (err) {
                                console.log(err);
                            }
                        })
                    })
                })
            },
            error: function (err) {
                console.log(err);
            }
        })
        $(".tianjiayg").click((e) => {
            window.location = "./yg.html"
        })
        $(".hydj").click((e) => {
            e.preventDefault()
            $.ajax({
                method: "post",
                url: `${Baseurl}/member`,
                data: {
                    level_id: $(".level_id").val(),
                    member_level: $(".member_level").val(),
                    money: $(".money").val(),
                    discount: $(".discount_level").val()
                },
                success: function (data) {
                    console.log(data);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })

        $(".member_id_cz").change((e) => {
            e.preventDefault()
            let promise = new Promise((resolve, reject) => {
                $.ajax({
                    method: "get",
                    url: `${Baseurl}/member_search_info?member_id=${$(".member_id_cz").val()}`,
                    success: function (data) {
                        console.log(data);
                        resolve(data)
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            })
            promise.then((data) => {
                console.log(data);
                if (data == "") {
                    console.log("查不到");
                    $(".member_level_cz").show()
                    $(".member_level_cz").prev().show()
                    $(".discount_cz").show()
                    $(".discount_cz").prev().show()
                    $(".remaining_sum_cz").show()
                    $(".remaining_sum_cz").prev().show()
                    $(".hycz_tianjia").click((e) => {
                        e.preventDefault()
                        $.ajax({
                            method: "post",
                            url: `${Baseurl}/member_info`,
                            data: {
                                member_id: $(".member_id_cz").val(),
                                member_name: $(".member_name_cz").val(),
                                member_level: $(".member_level_cz").val(),
                                money: $(".money_cz").val(),
                                discount: $(".discount_cz").val(),
                                remaining_sum: $(".remaining_sum_cz").val()
                            },
                            success: function (data) {
                                console.log(data);
                            },
                            error: function (err) {
                                console.log(err);
                            }
                        })
                    })
                } else {
                    console.log("找到");
                    // $(".member_name_cz").text(data[0].member_name)
                    // $(".member_level_cz").text(data[0].member_name)

                    $(".member_level_cz").hide()
                    $(".member_level_cz").prev().hide()
                    $(".discount_cz").hide()
                    $(".discount_cz").prev().hide()
                    $(".remaining_sum_cz").hide()
                    $(".remaining_sum_cz").prev().hide()
                    $(".member_name_cz").val(data[0].member_name)
                    $(".hycz_tianjia").click((e) => {
                        $.ajax({
                            method: "post",
                            url: `${Baseurl}/member_money`,
                            data: {
                                member_id: $(".member_id_cz").val(),
                                money: data[0].money * 1 + $(".money_cz").val() * 1,
                                remaining_sum: data[0].remaining_sum * 1 + $(".money_cz").val() * 1
                            },
                            success: function (data) {
                                console.log(data);
                            },
                            error: function (err) {
                                console.log(err);
                            }
                        })
                    })
                }
            }).catch((err) => {
                console.log(err);
            })
        })
        $(".tt").click((e) => {
            e.preventDefault()
            $.ajax({
                method: "get",
                url: `${Baseurl}/member_search`,
                success: function (data) {
                    console.log(data);
                    let dataObj = {
                        data: data
                    }
                    let str = template("art06", dataObj)
                    $("#tob6").html("")
                    $("#tob6").html(str)
                    let index;
                    let st;
                    $('.sta').each((index,el)=>{
                        $(el).click((e)=>{
                            if($(el).text()=="挂失"){
                                index=$(el).parent().parent().attr("index")
                                $(el).text("正常")
                                st=$(el).text()
                            }else{
                                $(el).text("挂失")
                                index=$(el).parent().parent().attr("index")
                                st=$(el).text()
                            }
                            $.ajax({
                                method:"post",
                                url:`${Baseurl}/member_status`,
                                data:{
                                    member_id:index,
                                    member_status:st
                                },
                                success:function(data){
                                    console.log(data);
                                },
                                error:function(err){
                                    console.log(err);
                                }
                            })
                        })
                    })
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })
        $(".hyxx_tianjia").click((e) => {
            e.preventDefault()
            $.ajax({
                method: "post",
                url: `${Baseurl}/member_info`,
                data: {
                    member_id: $(".member_id_xx").val(),
                    member_name: $(".member_name_xx").val(),
                    member_level: $(".member_level_xx").val(),
                    money: $(".money_xx").val(),
                    discount: $(".discount_xx").val(),
                    remaining_sum: $(".r_sum_xx").val()
                },
                success: function (data) {
                    console.log(data);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })

    </script>
</body>

</html>